// path:node内置模块，处理路径的
const path = require('path')
// 插件的使用：1、引入插件：
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
// 引入自动刷新html的插件：
const HtmlWebpackPlugin = require("html-webpack-plugin")
// 安装清理dist文件里的重复文件的插件：
const { CleanWebpackPlugin } = require("clean-webpack-plugin")
module.exports = {
    // entry:入口
    entry:'./src/index.js',
    // output：出口
    output:{
        filename:'main.js',
        // 这里需要修改输出地址的话，需要使用绝对路径：
        // path:path.relative(__dirname,'dist')
        path:path.resolve(__dirname,'dist')
    },
    // 配置映射：
    devtool:"source-map",
    // 配置开发服务器，实现自动刷新页面
    devServer: {
        contentBase: './dist',
        port: 8888
      },
    // 配置模块加载器：
    module:{
        rules:[
            // 此规则是个数组、每一个元素都是一种加载对象：
            {
                // 以css后缀结尾的文件：
                test:/\.css$/,
                use:[
              {  
                  //    在引入插件之后呢，需要把style-loader 替换掉！这样就可以实现js与css分离啦
                loader:MiniCssExtractPlugin.loader,
                options:{
                    publicPath:'./'
                }
            },
                    "css-loader"
                ]
            },
            // 以less后缀结尾的文件：
            {
                test:/\.less$/,
                use:[
                  {
                    loader:MiniCssExtractPlugin.loader,
                    options:{
                        publicPath:'./'
                    }
                  },
                    "css-loader",
                    "less-loader",
                ]
            },
            {
                test: /\.(png|jpe?g|gif)$/i,
                use:[
                    {
                        loader:"file-loader",
                        // options:outputpath:导出的路径、在dist里面形成一个新的文件夹！！
                        options:{
                            outputPath:'imges'
                        }
                    }
                ]
            },
            {
                test:/\.ttf$/,
                use:[
                   {
                    loader:"file-loader",
                    options:{
                        outputPath:'assets'
                    }
                   }
                ]
            }
        ]
    },
    plugins:[
        // 这里每一个都是一个插件, 
        new MiniCssExtractPlugin(),
        new HtmlWebpackPlugin({
            template:"public/index.html"
        }),
        new CleanWebpackPlugin()
    ]
}